<!-- 商品详情 -->
<template>
	<view class="detail-wrap">
		<!-- 标题栏 -->
		<view class="nav-box">
			<view class="state-hack"></view>
			<view :style="{ height: navbarHeight + 'px' }">
				<view hover-class="back-hover" class="back-box u-m-x-30 u-flex u-row-center u-col-center" @tap="$Router.back()">
					<u-icon :name="backIconName" color="#fff"></u-icon>
				</view>
			</view>
		</view>

		<!-- 缺省页 -->
		<shopro-empty v-if="showEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods_null.png'" :tipText="showEmptyText"
			btnText="返回上一页" @click="$Router.back()"></shopro-empty>
		<view class="detail_box" v-else>
			<view class="detail-content">
				<!-- 轮播 -->
				<u-swiper :height="750" borderRadius="0" :list="goodsInfo.imgs" indicator-pos="bottomRight"
					mode="number" :interval="3000" @click="onGoodsSwiper"></u-swiper>

				<!-- 价格卡片组 -->
				<sh-price-card v-if="goodsInfo.id" :detail="goodsInfo"></sh-price-card>
				<block v-if="isLogin">
					<view class="xuanfuanniu" v-if="showJiaruBtn">
						<view class="jiaru" @click="addGoodsOrShowSku">
							<text class="jiarutext">加入购物车</text>
						</view>
						<!-- #ifdef APP-PLUS || H5 -->
						<view class="nums" v-if="goodsInfo.number">{{ goodsInfo.number }}</view>
						<!-- #endif -->
					</view>
					<view class="xuanfuanniu" v-else>
						<view class="jumpPosition"></view>
						<hx-number-box @change="addGoods" :value="goodsInfo.number" :rowData="goodsInfo"></hx-number-box>
					</view>
				</block>

				<!-- 标题 -->
				<view class="u-m-b-10 title-box u-p-20 u-skeleton-fillet">
					<view class="goods-title u-m-b-10 u-ellipsis-2">{{ goodsInfo.title }}</view>
					<view class="sub-title u-ellipsis-2">{{ goodsInfo.subtitle }}</view>
				</view>

				<!-- 选项卡 -->
				<view class="tab-box u-flex">
					<view class="tab-item u-flex-col u-row-center u-col-center" @tap="onTab(tab.id)"
						v-for="tab in tabList" :key="tab.id">
						<view class="tab-title">
							{{ tab.title }}
							<text v-if="tab.id == 'tab2'" class="comment-num">({{ commentNum }})</text>
						</view>
						<text class="tab-line" :class="{ 'line-active': tabCurrent === tab.id }"></text>
					</view>
				</view>
				<view class="tab-detail u-p-20 u-m-b-10">
					<!-- 详情富文本 -->
					<view class="rich-box " v-if="tabCurrent === 'tab0'">
						<u-parse :html="goodsInfo.content"></u-parse>
					</view>
					<!-- 参数 -->
					<view class="goods-size" v-if="tabCurrent === 'tab1'">
						<view class="table-box" v-if="goodsInfo.params && goodsInfo.params.length">
							<view class="t-tr u-flex" v-for="t in goodsInfo.params" :key="t.title">
								<view class="t-head u-flex">{{ t.title }}</view>
								<view class="t-detail">{{ t.content }}</view>
							</view>
						</view>
					</view>
					<!-- 评价 -->
					<view class="goods-comment" v-if="tabCurrent === 'tab2'">
						<block v-for="comment in commentList" :key="comment.id">
							<sh-comment :comment="comment"></sh-comment>
						</block>
						<shopro-empty v-show="!commentList.length" marginTop="20rpx"
							:image="$IMG_URL + '/imgs/empty/comment_empty.png'" tipText="暂无评价~"></shopro-empty>
						<view class="more-box u-flex u-row-center u-col-center" v-show="commentNum > 3">
							<button class="u-reset-button more-btn u-flex u-row-center u-col-center"
								@tap="jump('/pages/goods/comment/comment-list', { goodsId: goodsInfo.id })">
								查看全部
								<u-icon name="arrow-right" size="28" color="#d5a65a"></u-icon>
							</button>
						</view>
					</view>
				</view>
			</view>

			<!-- 购物车 -->
			<flyInCart ref="inCart" :cartBasketRect="cartBasketRect"></flyInCart>
			<view class="foot" @touchmove.stop.prevent="mpClear" :style="{height: footHeight}">
				<view class="zz" @click="hideShoppingCar"></view>
				<view class="btn-box">
					<view class="btn-box-left" @click="callDianpu(dianpuData.phone)">
						<view class="imgBox">
							<image src="../../static/store/contact.png" mode=""></image>
						</view>
						<text>联系商家</text>
					</view>
					<view class="btn-box-line"></view>
					<view class="btn-box-center" @click="showShoppingCar">
						<view class="cart">
							<view class="tag cartNum" v-if="totalNumber>0">{{totalNumber}}</view>
							<image :src="totalNumber ? '/static/store/cart.png' : '/static/store/cart2.png'" mode=""></image>
						</view>
						<view class="priceBox">
							<view class="hx-txt-18 hx-color-white" v-if="totalPrice>0">
								￥{{totalPrice}}
							</view>
							<!-- <view class="hx-txt-10 hx-color-gray">
								另需配送费￥{{shippingDees}}
							</view> -->
						</view>
					</view>
					<view class="btn-box-right">
						<view class="jiesuan" v-if="totalPrice>0 && totalPrice >= startingPrice"
							@click="jump('/pages/dianpu/jiesuan',{dianpu_id:goodsInfo.dianpu_id})">去结算</view>
						<view class="pscj hx-txt-10 hx-color-gray" v-else>
							<text v-if="startingPrice>0">差￥{{-(totalPrice-startingPrice)}}起送</text>
						</view>
					</view>
				</view>
				<view class="cart-box" :style="{display: showCartDetail ? 'flex' : 'none'}">
					<!-- <view class="box-container rebate-box" v-if="showDiscount">
						<text>已享100减25</text>
					</view> -->
					<view class="box-container operating-box">
						<view class="operating-box_right">
						</view>
						<view class="operating-box_left clear" @click="clearCart">
							<i class="hxicon-delete"></i>
							<text>清空购物车</text>
						</view>
					</view>
					<view class=" goods-box">
						<view class="" style="flex: 1;">
							<scroll-view scroll-y="true" class="goods-list-scroll" :scroll-top="carGoodsScrollTop">
								<view class="goods-list">
									<view class="box" v-for="(rowData,i) in cart" :key="rowData.id" v-if="rowData.number>0">
										<view class="m-store-item">
											<view class="m-img">
												<image style="width: 100%;height: 100%;" :src="rowData.image" mode="aspectFit"></image>
											</view>
											<view class="m-text">
												<view class="m-title" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 500rpx;">
													{{ rowData.title }}
												</view>
												<view class="m-descripe">
													{{ rowData.subtitle }}
												</view>
												<view class="m-price-box" >
													<view class="symbol">￥</view>
													<view class="m-price">{{rowData.price}}</view>
													<view class="m-old-price" v-if="rowData.original_price">
														<text>￥{{rowData.original_price}}</text>
													</view>
												</view>
												<view class="m-distance" > 
												<view :class="'addEle2_' + rowData.id" class="jumpPosition">
												</view>
													<hx-number-box @change="addGoods" :value="rowData.number" :rowData="rowData" :clickTime="clickTime"></hx-number-box>
												</view>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>

			<!-- 规格弹窗 -->
			<shop-sku v-if="showSku" v-model="showSku" :goodsInfo="goodsInfo" @change="addGoodsBySku"></shop-sku>

			<!-- 登录 -->
			<shopro-auth-modal v-if="authType"></shopro-auth-modal>
		</view>
	</view>
</template>

<script>
	import shPriceCard from '../goods/components/sh-price-card.vue';
	import shComment from '../goods/components/sh-comment.vue';
	import shopSku from './components/shopro-sku.vue';
	import hxNumberBox from "./components/uni-number-box.vue";
	import flyInCart from '@/components/flyInCart.vue'
	import {mapMutations, mapActions, mapState} from 'vuex';

	let systemInfo = uni.getSystemInfoSync();
	let statusBarHeight = systemInfo.statusBarHeight;

	export default {
		components: {
			shPriceCard,
			shComment,
			shopSku,
			hxNumberBox,
			flyInCart
		},
		data() {
			return {
				backIconName: 'arrow-left',
				pageScroll: {},
				pageScrollTop: 0,
				menuCurrentId: 1,
				menuScrollTop: 0,
				mainHeight: 0,
				sizeCalcState: false,
				statusBarHeight,
				clickTime: 100,
				footHeight: '0',
				touchData: {},

				showEmpty: false,
				showEmptyText: '',

				tabCurrent: 'tab0',
				tabList: [{
						id: 'tab0',
						title: '商品详情'
					},
					{
						id: 'tab1',
						title: '规格参数'
					},
					{
						id: 'tab2',
						title: '用户评价'
					}
				],

				dianpuData: null,
				goodsInfo: {},
				showJiaruBtn: true,
				showSku: false, //是否显示规格弹窗
				commentList: [], //商品评价列表
				commentNum: 0, //商品评价总数

				dianpuCartStorageName: 'dianpuCartList',
				cart: [],
				carGoodsScrollTop: 0,
				showCartDetail: false,
				totalPrice: 0,
				totalNumber: 0,

				//配送费
				shippingDees: 0,
				//配送起步价
				startingPrice: 0,
				//购物车显示折扣
				showDiscount: true,
				
				//购物车位置数据
				cartBasketRect: {}
			};
		},
		// 是否登录
		computed: {
			...mapState({
				isLogin: ({
					user
				}) => user.isLogin,
				authType: ({
					user
				}) => user.authType
			}),
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return 48;
				// #endif
				// #ifdef MP
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height;
				// #endif
			}
		},
		onLoad(option) {
			const that = this
			that.id = option.id || 0

			uni.showLoading({title: '加载中'});
			that.$http('dianpu.goodsdetail', {
			    id: that.$Route.query.id
			}).then(res => {
				uni.hideLoading();
				if (res.code == 1) {
					that.goodsInfo = res.data;
					that.getDianpuData();
					that.getCommentList();
					that.initCart();
				} else {
					that.showEmpty = true;
				}
			});
		},
		onShow() {
			this.initCart()
		},
		onReady() {
			const that = this
			let q = uni.createSelectorQuery()
			setTimeout(function(){
				q.select('.cart').boundingClientRect(data => {
				 that.cartBasketRect = data
				}).exec();
			},100)
		},
		methods: {
			onTab(id) {
				this.tabCurrent = id;
			},
			onGoodsSwiper(e) {
				this.$tools.previewImage(this.goodsInfo.images, e);
			},

			jump(path, parmas) {
				this.$Router.push({path: path, query: parmas});
			},

			getDianpuData() {
				let that = this;
				that.$http('dianpu.detail', {
					id: that.goodsInfo.dianpu_id,
				}).then(res => {
					that.dianpuData = res.data;
				});
			},
			getCommentList() {
				let that = this;
				that.$http('goods.commentList', {
					goods_id: that.goodsInfo.id,
					per_page: 3,
					type: 'all'
				}).then(res => {
					if (res.code === 1) {
						that.commentList = res.data.data;
						that.commentNum = res.data.total;
					}
				});
			},
			initCart() {
				let that = this;
				let cart = that.getCart();
				that.cart = cart;
				that.calcCart();
				that.syncGoodsNumber();
				uni.hideLoading();
			},
			getCart() {
				let carts = uni.getStorageSync(this.dianpuCartStorageName);
				if (!carts) {
					carts = [];
				}
				for(let i in carts){
					if(carts[i].dianpu_id == parseInt(this.goodsInfo.dianpu_id)){
						return carts[i].cart;
					}
				}
				return [];
			},
			storeCart(cart) {
				this.cart = cart
				let matchIdx = 0
				let carts = uni.getStorageSync(this.dianpuCartStorageName) || []
				for(let i in carts){
					if(carts[i].dianpu_id == parseInt(this.goodsInfo.dianpu_id)){
						matchIdx = i
						break
					}
					matchIdx++
				}
				carts[matchIdx] = {dianpu_id: parseInt(this.goodsInfo.dianpu_id), cart: cart}
				uni.setStorageSync(this.dianpuCartStorageName, carts)
			},
			calcCart() {
				let totalNumber = 0;
				let totalPrice = 0;
				this.cart.forEach(item=>{
					totalNumber += item.number
					totalPrice += item.total_price
				})
				this.totalNumber = totalNumber
				this.totalPrice = totalPrice.toFixed(2)
			},
			clearCart(){
				this.storeCart([])
				this.calcCart()
				this.syncGoodsNumber()
				this.hideShoppingCar()
			},
			syncGoodsNumber() {
				let cart = this.cart
				let n = 0
				for(let i in cart){
					if(this.goodsInfo.id == cart[i].goods_id){
						n += cart[i].number
					}
				}
				if (n > 0 && !this.goodsInfo.is_sku) {
					this.showJiaruBtn = false
				}
				this.goodsInfo.number = n
			},
			
			addGoodsOrShowSku() {
				if (this.goodsInfo.is_sku) {
					this.showSku = true
 				} else {
					this.addGoods(1, this.goodsInfo)
					this.showJiaruBtn = false
				}
			},

			addGoods(number,goodsData,skuPrice){
				let that = this;
				let cart = that.cart;
				let matchCartIdx = 0;
				for (let i in cart) {
					if (cart[i].goods_id == goodsData.id && (!goodsData.is_sku || cart[i].goods_sku_price_id == skuPrice.id)) {
						matchCartIdx = i;
						break;
					}
					matchCartIdx++;
				}

				this.goodsInfo.number = parseInt(number)

				if (parseInt(number) > 0) {
					cart[matchCartIdx] = {
						raw: goodsData,
						number: parseInt(number),
						goods_id: goodsData.id,
						category_id: goodsData.category_id,
						title: goodsData.title,
						subtitle: goodsData.is_sku ? skuPrice.goods_sku_text : goodsData.subtitle,
						price: goodsData.is_sku ? skuPrice.price : goodsData.price,
						original_price: goodsData.original_price,
						goods_sku_price_id: goodsData.is_sku ? skuPrice.id : 0,
						image: (goodsData.is_sku && skuPrice.image) ? skuPrice.image : goodsData.image,
						total_price: parseFloat(((parseFloat(goodsData.is_sku ? skuPrice.price : goodsData.price) * parseInt(number))).toFixed(2))
					}
				}
				if (parseInt(number) == 0 && cart[matchCartIdx]) {
					cart.splice(matchCartIdx, 1)
					this.showJiaruBtn = true
				}
			
				that.storeCart(cart)
				that.calcCart()
				that.syncGoodsNumber()
			},
			addGoodsBySku(number, skuPrice) {
				this.addGoods(number, this.goodsInfo, skuPrice)
			},

			//显示购物车
			showShoppingCar(){
				if(this.totalNumber == 0){
					return;
				}
				this.footHeight = '100%';
				this.showCartDetail = true;
				this.carGoodsScrollTop = 0;
			},
			//隐藏购物车
			hideShoppingCar(){
				this.footHeight = '0';
				this.showCartDetail = false;
			},

			mpClear(e) {
				e.stopPropagation()
			},
			
			callDianpu(phone){
				if(!phone){
					return;
				}
				uni.makePhoneCall({
				    phoneNumber: phone //仅为示例
				});
			}
		}
	};
</script>

<style lang="scss">
	// 标题栏
	.nav-box {
		position: fixed;
		width: 100%;
		min-height: 140rpx;
		z-index: 888;
		top: 0;

		.back-box {
			background-color: rgba(#000, 0.18);
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-top: 14rpx;
		}

		.back-hover {
			background-color: rgba(#fff, 0.18);
		}

		.state-hack {
			width: 100%;
			height: var(--status-bar-height);
			/* #ifdef H5 */
			height: 20rpx;
			/* #endif */
		}
	}

	.combo {
		white-space: nowrap; // 滚动必须加的属性
		width: 100%;
		padding: 20rpx;
		margin: 0 auto;

		.title-desc {
			font-weight: bold;
			padding: 20rpx 0;
		}

		.item {
			width: 25%;
			margin-right: 30rpx;
			display: inline-block;
			vertical-align: top;

			.img {
				display: inline-block;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 6rpx;
				}
			}

			.item-title {
				display: block;
				width: 90%;
				line-height: 40rpx;
				color: red;
			}

			.item-select {
				display: block;
				width: 100%;
				line-height: 40rpx;

				.text {
					overflow: hidden;
					width: 80%;
					display: inline-block;
				}
			}
		}
	}

	// 拼团玩法
	.groupon-play {
		background: #fff;
		line-height: 94rpx;

		.title {
			font-size: 28rpx;
			color: #999;
		}

		.description {
			font-size: 28rpx;
			width: 500rpx;
			margin-left: 30rpx;
		}
	}

	// 选项卡
	.tab-box {
		height: 102rpx;
		background: #fff;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.8);
		margin-top: 10rpx;

		.tab-item {
			flex: 1;
			height: 100%;
			position: relative;
			font-size: 30rpx;
			font-weight: bold;

			.tab-line {
				width: 123rpx;
				height: 4rpx;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				background: transparent;
				position: absolute;
				z-index: 2;
			}

			.line-active {
				background: rgba(168, 112, 13, 1);
			}
		}
	}

	// 选项卡内容
	.tab-detail {
		min-height: 300rpx;
		background: #fff;

		// 规格参数
		.goods-size {
			.table-box {
				width: 710rpx;
				margin: auto;
				background: rgba(255, 255, 255, 1);
				border: 1rpx solid rgba(223, 223, 223, 1);

				.t-tr {
					border-bottom: 1rpx solid rgba(223, 223, 223, 1);

					&:last-child {
						border-bottom: none;
					}

					.t-head {
						font-size: 26rpx;
						color: #999;
						flex: 1;
						padding: 15rpx 20rpx;
						height: 100%;
					}

					.t-detail {
						font-size: 26rpx;
						border-left: 1rpx solid rgba(223, 223, 223, 1);
						flex: 4;
						padding: 15rpx 20rpx;
						height: 100%;
					}
				}
			}
		}

		// 富文本
		.rich-box {
			/deep/ img {
				display: block;
			}
		}

		// 评论
		.goods-comment {
			.more-box {
				height: 100rpx;
				background: #fff;

				.more-btn {
					width: 200rpx;
					line-height: 60rpx;
					border: 1rpx solid rgba(213, 166, 90, 1);
					border-radius: 30rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(168, 112, 13, 1);
					padding: 0;
					background: #fff;

					.cuIcon-right {
						font-size: 30rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}

	// 规格卡片
	.sku-box {
		line-height: 82rpx;
		background: #fff;
		padding: 0 20rpx;
		margin: 10rpx 0;
		font-size: 28rpx;

		.title {
			color: #999;
			margin-right: 20rpx;
		}

		.cuIcon-right {
			color: #bfbfbf;
			font-size: 36rpx;
		}
	}

	// 标题卡片
	.title-box {
		background-color: #fff;

		.goods-title {
			font-size: 28rpx;
			font-weight: 600;
			line-height: 42rpx;
		}

		.sub-title {
			color: #a8700d;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 42rpx;
		}
	}

	// 底部工具栏
	.tabbar-foot {
		min-height: 100rpx;
		width: 100%;
	}

	.detail-foot_box {
		min-height: 100rpx;
		border-top: 1rpx solid rgba(238, 238, 238, 1);
		background-color: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 999;

		.left,
		.detail-right {
			flex: 1;
		}

		.tools-item {
			flex: 1;
			height: 100%;

			.tool-img {
				width: 46rpx;
				height: 46rpx;
			}

			.tool-title {
				font-size: 22rpx;
				line-height: 22rpx;
				padding-top: 8rpx;
			}
		}

		.detail-btn-box {
			flex: 1;

			.tool-btn {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(#fff, 0.9);
				width: 210rpx;
				min-height: 70rpx;
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.price {
					font-size: 24rpx;
					line-height: 24rpx;
					font-weight: bold;
					color: rgba(#fff, 0.9);
				}

				.price-title {
					font-size: 20rpx;
					line-height: 20rpx;
					font-weight: 500;
					color: rgba(#fff, 0.9);
					padding-top: 8rpx;
				}
			}

			.add-btn {
				box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
				background: linear-gradient(90deg, rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
			}

			.pay-btn {
				box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
				background: linear-gradient(90deg, #dd0000, #FF0000);
			}

			.score-btn {
				width: 600rpx;
				line-height: 80rpx;
				background: linear-gradient(90deg, rgba(49, 133, 243, 1), rgba(80, 205, 242, 1));
				box-shadow: 0px 7px 6px 0px rgba(80, 205, 242, 0.2);
				border-radius: 40rpx;
				font-size: 30rpx;

				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				margin-right: 20rpx;
			}

			.seckill-btn {
				width: 432rpx;
				line-height: 70rpx;
				background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
				font-size: 28rpx;

				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}

			.seckilled-btn {
				width: 432rpx;
				line-height: 70rpx;
				background: rgba(221, 221, 221, 1);
				font-size: 28rpx;

				font-weight: 500;
				color: #999999;
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}

			.groupon-btn {
				width: 210rpx;
				height: 70rpx;
				background: linear-gradient(90deg, rgba(254, 131, 42, 1), rgba(255, 102, 0, 1));
				box-shadow: 0px 7rpx 6rpx 0px rgba(255, 104, 4, 0.22);
				border-radius: 35rpx;
			}
		}
	}
	
	$hx-theme-color: #FFC107;
	$hx-theme-color-light: #FFEB3B;
	.hx-txt-10{
		font-size: 10px;
	}
	.hx-txt-18{
		font-size: 18px;
	}
	.hx-color-gray{
		color: #bbbbbb;
	}
	.hx-color-white{
		color: #FFFFFF;
	}
	.hx-color-black{
		color: #333333;
	}
	.foot{
		position: fixed;
		display: flex;
		z-index: 999;
		
		justify-content:center;
		align-items : center; 
		bottom: 0;
		height: 100%;
		width: 100%;
		
		/*width: calc(100% - 32px);*/
		.btn-box{
			position:absolute;
			display: flex;
			bottom: 15px;
			justify-content:center;
			align-items : center; 
			margin:0;
			height: 50px;
			width: calc(100% - 32px);
			z-index: 9;
			&-left{
				background: #222222;
				border-top-left-radius:50px;
				border-top-right-radius:9px;
				border-bottom-left-radius:50px;
				border-bottom-right-radius:9px;
				padding-left: 6upx;
				display: flex;
				flex-direction:column;
				justify-content:center;
				align-self: center;
				width: 70px;
				height: 100%;
				color: #f6d200;
				text-align: center;
				.imgBox{
					display: flex;
					text-align: center;
					justify-content:center;
					image{
						width: 20px;
						height: 20px;
					}
				}
				text{
					font-size: 20upx;
				}
			}
			&-line{
				background: #ffffff;
				width: 2px;
				height: 100%;
			}
			&-center{
				height: 100%;
				flex: auto;
				display: flex;
				justify-content:flex-start;
				align-self: center;
				align-items: center;
				background: #222222;
				border-top-left-radius:8upx;
				border-bottom-left-radius:8upx;
				padding-left: 10upx;
				.cart{
					position: relative;
					width: 36px;
					height: 36px;
					image{
						width: 100%;
						height: 100%;
					}
					.tag{
						position: absolute;
						right: 12upx;
						top: 16upx;
						height: 18px;
						width: 18px;
						background-color: #ff4000;
						color: #ffffff;
						border-radius: 50%;
						z-index: 1;
						font-size: 10px;
						text-align: center;
						line-height: 18px;
					}
				}
				.priceBox{
					flex: auto;
				}
				
			}
			&-right{
				width: 70px;
				height: 100%;
				position: relative;
				display: flex;
				justify-content:flex-start;
				align-self: center;
				align-items: center;
				
				
				.pscj{
					width: 100%;
					height: 100%;
					border-top-right-radius:100upx;
					border-bottom-right-radius:100upx;
					background: #222222;
					text-align: center;
					display: flex;
					justify-content:center;
					align-self: center;
					align-items: center;  
				}
				.jiesuan{
					width: 100%;
					height: 100%;
					font-size: 28upx;
					border-top-right-radius:100upx;
					border-bottom-right-radius:100upx;
					text-align: center;
					display: flex;
					justify-content:center;
					align-self: center;
					align-items: center;    
					background: linear-gradient(45deg, $hx-theme-color-light, $hx-theme-color); 
					font-weight: bold;
					color: #222222;
				}
			}
		}
		.zz{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0,0,0,.7);
			z-index: 1;
		}
		.cart-box{
			display: flex;
			justify-content: flex-start;
			flex-flow: column;
			background: #ffffff;
			position: absolute;
			bottom: 0; 
			z-index: 2;
			max-height: 66%;
			
			padding-bottom: 62px;
			border-top-left-radius: 16px;
			border-top-right-radius: 16px;
			overflow: hidden;
			width: 100%;
			.rebate-box{
				height: 30px;
				background: #FFC107;
				color: #FF9900;
				text-align: center;
				line-height: 30px;
				font-size: 14px;
			}
			.box-container{
				box-sizing: border-box;
				padding:0 16px;
			}
			.operating-box{
				font-size: 12px;
				line-height: 40px;
				height: 40px;
				border-bottom: 1px solid #f6f6f6;
				color: #666666;
				display: flex;
				flex-direction: row;
				&_right{
					flex: 1;
				}
				&_left{
					display: flex;
					flex-direction: row;
				}
				
			}
			.goods-box{
				height: 100%;
			    overflow: hidden;
				flex: 1;
				display: flex;
				.goods-list-scroll{
					height: 100%;
					
					.goods-list{
						
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						
						.box{
							width: 100%;
							border-bottom: 1px solid #f6f6f6;
							box-sizing: border-box;
							padding: 0 16px;
							.m-store-item{
								display: flex;
								flex-direction: row;
								width: 100%;
								justify-content: space-between;
								align-items: flex-end;
								padding-top: 15px;
								padding-bottom: 15px;
								.m-img{
									flex: 0 0 85px;
									height: 85px;
									background: #eee;
									border-radius: 4px;
								}
								.m-text{
									flex: 1;
									position: relative;
									height: 85px;
									padding: 0 6px;
									display: flex;
									align-content: space-between;
									flex-direction: column;
									.m-title{
										font-size: 16px;
										color:#555555;
										height: 21px;
										font-weight: bold;
									}
									.m-descripe{
										font-size: 12px;
										color:#999999;
										margin-top: 5px;
										height: 35px;
									}
									.m-price-box{
										height: 24px;
										font-weight: bold;
										display: flex;
										flex-direction: row;
										align-items: flex-end;
										.symbol{
											color:#ff582b;
											font-size: 12px;
										}
										.m-price{
											position: relative;
											top: 2px;
											font-size: 18px;
											color:#ff582b;
										}
										.m-old-price{
											margin-left: 3px;
											display: flex;
											flex-direction: row;
											font-size: 10px;
											color:#999999;
											margin-top: 5upx;
											text-decoration: line-through;
											font-weight: normal;
										}
									}
									.m-distance{
										position: absolute;
										right: 0;
										bottom: -4px;
										z-index: 16;
										color:#b2b2b2;
										font-size: 20upx;
										text-align: right;
										.jumpPosition{
											position: absolute; 
											bottom: 23px;
											right: 0;
											z-index: 2;
											width: 28px;
											height: 28px;
										}
									}
									
								}
								
							}
						}
					}
				}
			}
		}
	}
		
	.xuanfuanniu{
		position: absolute;
		right: 40rpx;
		margin-top: -90rpx;
		.jiaru{
			background: linear-gradient(100deg, #FFEB3B, #FFC107);
			border-radius: 40rpx;
			padding: 10rpx 20rpx;
			.jiarutext{
				font-size: 20rpx;
			}
		}
		.nums{
			background-color: #FF0000;
			color: #FFF;
			    width: 30rpx;
			    height: 30rpx;
			    border-radius: 30rpx;
			    text-align: center;
			    font-size: 20rpx;
			    position: absolute;
			    right: -10rpx;
			    top: -4rpx;
		}
	}
</style>
